import React, { Component, forwardRef, PureComponent } from 'react'
import { connect } from '@umijs/max'
import Tools from '@/utils/Tools'
import { queryDetailReq, queryVNodeDetailReq } from '../../../api'
import styles from './index.less'

class ViewDetail extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      spreadSta: false,
      currentTargetNode: {},
    }
  }

  // 进入工作流页面，第一次点击工作流程目标，此时页面还未加载
  componentDidMount() {
    this.setState(
      {
        currentTargetNode: this.props?.treeCurrentTargetNode,
      },
      () => {
        this.initData()
      },
    )
  }

  UNSAFE_componentWillUpdate(nextProps) {
    const taskNode = this.props.taskNode
    if (taskNode.name != nextProps.taskNode.name) {
      queryDetailReq({ nodeId: taskNode.id }).then((data = {}) => {
        this.setState({
          ...data,
        })
      })
    }
    if (nextProps.currentTargetNode != this.props.currentTargetNode) {
      // eslint-disable-next-line react/no-will-update-set-state
      this.setState(
        {
          currentTargetNode: nextProps.currentTargetNode,
        },
        () => {
          this.initData()
        },
      )
    }
  }

  initData = () => {
    const { currentTargetNode } = this.state
    const { id, nodeType } = currentTargetNode || {}
    const params = {
      nodeId: id,
    }
    if (id) {
      if (nodeType == 12) {
        queryVNodeDetailReq(params).then((data = {}) => {
          this.setState({
            ...data,
          })
        })
      } else {
        queryDetailReq(params).then((data = {}) => {
          this.setState({
            ...data,
          })
        })
      }
    }
  }

  // eslint-disable-next-line react/no-unused-class-component-methods
  toggleViewDetail = (spreadStaParams = undefined) => {
    if (!this.state.spreadSta) {
      this.initData()
    }
    this.setState((prevState) => ({
      spreadSta: spreadStaParams != undefined ? spreadStaParams : !prevState.spreadSta,
    }))
  };

  returnComp = () => {
    const { currentTargetNode } = this.state
    const {
      createTime, creator, modifier, name, nodeTypeName, remark, updateTime, effectiveDateStart, effectiveDateEnd, cycle, startTimeHour, startTimeMin, endTimeHour, endTimeMin, execPoint, cycleDependency,
    } = this.state
    const { nodeType } = currentTargetNode || {}
    let tempComp = null
    if (nodeType == 1) { // 工作流
      tempComp = (
        <ul className={styles.node_detail_list}>
          <li className={styles.item}>
            <div className={styles.item_column}>任务名称</div>
            <div className={styles.item_cont}>{name || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>任务类型</div>
            <div className={styles.item_cont}>{nodeTypeName || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>责任人</div>
            <div className={styles.item_cont}>{creator || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>创建时间</div>
            <div className={styles.item_cont}>{createTime || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>最近修改人</div>
            <div className={styles.item_cont}>{modifier || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>最近修改时间</div>
            <div className={styles.item_cont}>{updateTime || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>描述</div>
            <div className={styles.item_cont}>{remark || '-'}</div>
          </li>
        </ul>
      )
    } else if (nodeType == 12) { // 虚节点
      tempComp = (
        <ul className={styles.node_detail_list}>
          <li className={styles.item}>
            <div className={styles.item_column}>节点类型</div>
            <div className={styles.item_cont}>{name || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>责任人</div>
            <div className={styles.item_cont}>{creator || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>创建时间</div>
            <div className={styles.item_cont}>{createTime || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>最近修改人</div>
            <div className={styles.item_cont}>{modifier || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>最近修改时间</div>
            <div className={styles.item_cont}>{updateTime || '-'}</div>
          </li>

          {/* // 后端暂时没有这个字段 */}
          {/* <li className={styles.item}> */}
          {/*  <div className={styles.item_column}>调度状态</div> */}
          {/*  <div className={styles.item_cont}>{remark || '-'}</div> */}
          {/* </li> */}

          <li className={styles.item}>
            <div className={styles.item_column}>生效日期</div>
            <div className={styles.item_cont}>{effectiveDateStart} - { effectiveDateEnd}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>调度周期</div>
            <div className={styles.item_cont}>{['月', '周', '天', '小时', '分钟'][cycle] || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>开始时间</div>
            {cycle == null && <div className={styles.item_cont}>-</div>}
            {
              cycle <= 2 && cycle != null && (
                <div className={styles.item_cont}>{Tools.addZero(startTimeHour)} : {Tools.addZero(startTimeMin)}</div>
              )
            }
            {
              cycle >= 3 && (
                <div className={styles.item_cont}>{Tools.addZero(startTimeHour)} : {Tools.addZero(startTimeMin)} - {Tools.addZero(endTimeHour)} : {Tools.addZero(endTimeMin)}</div>
              )
            }
          </li>
          {
            cycle == 1 && (
              <li className={styles.item}>
                <div className={styles.item_column}>调度间隔</div>
                <div className={styles.item_cont}>{['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'][execPoint - 1] || '-'}</div>
              </li>
            )
          }
          {
            cycle != 1 && cycle != 2 && (
              <li className={styles.item}>
                <div className={styles.item_column}>调度间隔</div>
                <div className={styles.item_cont}>{execPoint}{['号', '', '', '小时', '分钟'][cycle] || '-'}</div>
              </li>
            )
          }
          <li className={styles.item}>
            <div className={styles.item_column}>跨周期依赖</div>
            <div className={styles.item_cont}>{['不依赖上一周期', '等待上一周期结束'][cycleDependency] || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>描述</div>
            <div className={styles.item_cont}>{remark || '-'}</div>
          </li>
        </ul>)
    } else {
      tempComp = (
        <ul className={styles.node_detail_list}>
          <li className={styles.item}>
            <div className={styles.item_column}>节点名称</div>
            <div className={styles.item_cont}>{name || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>节点类型</div>
            <div className={styles.item_cont}>{nodeTypeName || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>责任人</div>
            <div className={styles.item_cont}>{creator || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>创建时间</div>
            <div className={styles.item_cont}>{createTime || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>最近修改人</div>
            <div className={styles.item_cont}>{modifier || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>最近修改时间</div>
            <div className={styles.item_cont}>{updateTime || '-'}</div>
          </li>
          <li className={styles.item}>
            <div className={styles.item_column}>描述</div>
            <div className={styles.item_cont}>{remark || '-'}</div>
          </li>
        </ul>
      )
    }
    return tempComp
  }

  render() {
    const {
      spreadSta,
    } = this.state
    return (
      <div className={`${styles.node_detail} ${spreadSta ? styles.spread : ''}`}>
        <div className={styles.node_detail_column}>任务详情</div>
        {
          this.returnComp()
        }
      </div>
    )
  }
}

class WrappedComponentRef extends Component {
  render() {
    const { forwardedRef, ...rest } = this.props
    return (
      <ViewDetail ref={forwardedRef} {...rest} />
    )
  }
}

const IComponent = connect(({ flowDev }) => ({ ...flowDev }))(WrappedComponentRef)

export default forwardRef((props, ref) => <IComponent {...props} forwardedRef={ref} />)
